Programación de Tareas en Segundo Plano para PWA de Frontend: Gestión de Trabajo sin Conexión

Las Aplicaciones Web Progresivas (PWA) han revolucionado la web al proporcionar experiencias similares a las nativas, incluidas las capacidades sin conexión. Un aspecto crucial de una PWA bien diseñada es la capacidad de gestionar tareas en segundo plano, incluso cuando el usuario está desconectado. Esta publicación de blog explora diversas técnicas para implementar la programación de tareas en segundo plano en PWA de frontend, permitiendo una gestión robusta del trabajo sin conexión y una mejor experiencia de usuario.

Comprendiendo la Necesidad de la Programación de Tareas en Segundo Plano

En un mundo conectado, a menudo damos por sentado el acceso a internet. Sin embargo, la conectividad puede ser poco fiable, intermitente o inexistente, especialmente en ciertas ubicaciones geográficas o durante los viajes. Las PWA abordan este desafío permitiendo a los usuarios continuar interactuando con la aplicación incluso sin conexión. La programación de tareas en segundo plano es esencial para:

• Sincronización de Datos: Sincronizar datos entre la PWA y el servidor cuando el usuario recupera la conectividad. Esto incluye la carga de datos recopilados sin conexión (por ejemplo, envíos de formularios, imágenes) y la descarga de contenido actualizado.
• Tareas Diferidas: Ejecutar tareas que no requieren interacción inmediata del usuario, como el envío de datos de análisis o la realización de cálculos complejos.
• Precarga de Contenido: Descargar recursos en segundo plano para mejorar el rendimiento y garantizar que el contenido esté disponible sin conexión.

Tecnologías Fundamentales para la Programación de Tareas en Segundo Plano

Varias tecnologías y API son instrumentales para implementar la programación de tareas en segundo plano en las PWA:

1. Service Worker

El Service Worker es el corazón de las capacidades sin conexión de una PWA. Actúa como un proxy entre la aplicación web y la red, interceptando las solicitudes de red y proporcionando respuestas en caché cuando no hay conexión. También habilita tareas en segundo plano a través de:

• Escuchas de Eventos (Event Listeners): Escuchar eventos como install, activate, fetch y sync.
• API de Caché (Cache API): Almacenar y recuperar activos en la caché del navegador.
• API de Sincronización en Segundo Plano (Background Sync API): Programar tareas para que se ejecuten cuando el usuario recupere la conectividad.

2. IndexedDB

IndexedDB es una base de datos NoSQL del lado del cliente que permite a las PWA almacenar datos estructurados sin conexión. Es ideal para almacenar datos que necesitan ser sincronizados con el servidor más tarde.

3. API de Sincronización en Segundo Plano (Background Sync API)

La API de Sincronización en Segundo Plano permite al Service Worker registrar tareas que deben ejecutarse cuando el navegador detecta conectividad de red. Esto es particularmente útil para sincronizar datos que se crearon o modificaron sin conexión.

4. API de Sincronización Periódica en Segundo Plano (Periodic Background Sync API)

La API de Sincronización Periódica en Segundo Plano, una extensión de la API de Sincronización en Segundo Plano, permite programar tareas periódicas para que se ejecuten en segundo plano, incluso cuando la aplicación no se está utilizando activamente. Esto es útil para tareas como obtener los últimos titulares de noticias o actualizar un pronóstico del tiempo.

5. API de Captura en Segundo Plano (Background Fetch API)

La API de Captura en Segundo Plano permite al Service Worker descargar archivos grandes en segundo plano, incluso si el usuario navega fuera de la página. Esto es útil para la precarga de contenido o la descarga de activos para su uso sin conexión.

Implementación de la Programación de Tareas en Segundo Plano: Una Guía Paso a Paso

Aquí hay una guía práctica para implementar la programación de tareas en segundo plano en una PWA utilizando la API de Sincronización en Segundo Plano:

Paso 1: Registrar un Service Worker

Primero, registra un Service Worker en tu archivo principal de JavaScript:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registrado con alcance:', registration.scope);
    })
    .catch(function(err) {
      console.log('Registro del Service Worker falló:', err);
    });
}

            

              
                Copy
              
            
          

Paso 2: Interceptar Solicitudes de Red en el Service Worker

En tu archivo `service-worker.js`, intercepta las solicitudes de red y sirve respuestas en caché cuando no haya conexión:

            
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Acierto de caché - devolver respuesta
        if (response) {
          return response;
        }

        // No está en caché - obtener de la red
        return fetch(event.request).then(
          function(response) {
            // Verificar si recibimos una respuesta válida
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // IMPORTANTE: Clonar la respuesta. Una respuesta es un stream
            // y como queremos que la caché la use y la aplicación también,
            // necesitamos clonarla.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

            

              
                Copy
              
            
          

Paso 3: Almacenar Datos sin Conexión en IndexedDB

Cuando el usuario está sin conexión, almacena los datos en IndexedDB. Por ejemplo, almacenemos los envíos de un formulario:

            
function saveFormDataOffline(formData) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Error al abrir la base de datos');
    };

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      const objectStore = db.createObjectStore('submissions', { autoIncrement: true });
      objectStore.createIndex('timestamp', 'timestamp', { unique: false });
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const submission = {
        data: formData,
        timestamp: Date.now()
      };
      const addRequest = objectStore.add(submission);

      addRequest.onsuccess = () => {
        resolve('Datos guardados sin conexión');
      };

      addRequest.onerror = () => {
        reject('Error al guardar datos sin conexión');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

            

              
                Copy
              
            
          

Paso 4: Registrar una Tarea de Sincronización en Segundo Plano

Registra una tarea de sincronización en segundo plano para sincronizar los datos cuando el usuario recupere la conectividad:

            
function registerSync() {
  navigator.serviceWorker.ready.then(function(registration) {
    return registration.sync.register('sync-form-data');
  }).then(function() {
    console.log('¡Sincronización en segundo plano registrada!');
  }).catch(function(error) {
    console.log('El registro de la sincronización en segundo plano falló: ', error);
  });
}

            

              
                Copy
              
            
          

Paso 5: Escuchar el Evento de Sincronización en el Service Worker

En tu archivo `service-worker.js`, escucha el evento `sync` y sincroniza los datos:

            
self.addEventListener('sync', function(event) {
  if (event.tag === 'sync-form-data') {
    event.waitUntil(syncFormData());
  }
});

function syncFormData() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('offline-data', 1);

    request.onerror = (event) => {
      reject('Error al abrir la base de datos');
    };

    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction(['submissions'], 'readwrite');
      const objectStore = transaction.objectStore('submissions');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = () => {
        const submissions = getAllRequest.result;
        if (submissions.length > 0) {
          // Enviar datos al servidor
          Promise.all(submissions.map(submission => sendDataToServer(submission.data)))
            .then(() => {
              // Limpiar IndexedDB
              const clearRequest = objectStore.clear();
              clearRequest.onsuccess = () => {
                resolve('Datos sincronizados y limpiados');
              };
              clearRequest.onerror = () => {
                reject('Error al limpiar IndexedDB');
              };
            })
            .catch(error => {
              reject('Error al enviar datos al servidor: ' + error);
            });
        } else {
          resolve('No hay datos para sincronizar');
        }
      };

      getAllRequest.onerror = () => {
        reject('Error al obtener datos de IndexedDB');
      };

      transaction.oncomplete = () => {
        db.close();
      };
    };
  });
}

function sendDataToServer(data) {
  // Reemplazar con tu punto de conexión de API real
  const apiUrl = '/api/submit-form';

  return fetch(apiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  }).then(response => {
    if (!response.ok) {
      throw new Error('La respuesta de red no fue correcta');
    }
    return response.json();
  });
}

            

              
                Copy
              
            
          

Uso de la API de Sincronización Periódica en Segundo Plano

La API de Sincronización Periódica en Segundo Plano es útil para tareas que necesitan realizarse regularmente, como obtener las últimas noticias o actualizar un pronóstico del tiempo. A continuación se explica cómo usarla:

Paso 1: Verificar la Compatibilidad

Primero, verifica si la API de Sincronización Periódica en Segundo Plano es compatible con el navegador:

            
if ('periodicSync' in registration) {
  // La API de Sincronización Periódica en Segundo Plano es compatible
} else {
  console.log('La API de Sincronización Periódica en Segundo Plano no es compatible');
}

            

              
                Copy
              
            
          

Paso 2: Solicitar Permiso

Necesitas solicitar permiso al usuario para usar la API de Sincronización Periódica en Segundo Plano:

            
navigator.permissions.query({ name: 'periodic-background-sync' })
  .then((status) => {
    if (status.state === 'granted') {
      // Se puede usar la sincronización periódica en segundo plano
    } else {
      console.log('Permiso de sincronización periódica en segundo plano no concedido');
    }
  });

            

              
                Copy
              
            
          

Paso 3: Registrar una Tarea de Sincronización Periódica

Registra una tarea de sincronización periódica en el Service Worker:

            
registration.periodicSync.register('update-news', {
  minInterval: 24 * 60 * 60 * 1000, // 1 día
}).then(() => {
  console.log('Sincronización periódica en segundo plano registrada para actualizar noticias');
}).catch((error) => {
  console.error('El registro de la sincronización periódica en segundo plano falló: ', error);
});

            

              
                Copy
              
            
          

Paso 4: Manejar el Evento de Sincronización Periódica

Maneja el evento `sync` en el Service Worker para realizar la tarea periódica:

            
self.addEventListener('sync', (event) => {
  if (event.tag === 'update-news') {
    event.waitUntil(updateNews());
  }
});

function updateNews() {
  // Obtener las últimas noticias del servidor
  return fetch('/api/news')
    .then(response => response.json())
    .then(news => {
      // Almacenar las noticias en IndexedDB
      return storeNewsInIndexedDB(news);
    })
    .catch(error => {
      console.error('Error al actualizar noticias: ', error);
    });
}

            

              
                Copy
              
            
          

Manejo de Errores y Mejores Prácticas

La implementación de la programación de tareas en segundo plano requiere una consideración cuidadosa del manejo de errores y las mejores prácticas:

• Mecanismos de Reintento: Implementa mecanismos de reintento con retroceso exponencial (exponential backoff) para las tareas fallidas.
• Idempotencia: Asegúrate de que las tareas sean idempotentes, lo que significa que ejecutarlas varias veces tiene el mismo efecto que ejecutarlas una vez. Esto es importante para prevenir la corrupción de datos en caso de reintentos.
• Optimización de la Batería: Ten en cuenta el consumo de batería al programar tareas en segundo plano. Evita tareas frecuentes que puedan agotar la batería rápidamente.
• Notificación al Usuario: Proporciona retroalimentación al usuario sobre el estado de las tareas en segundo plano, especialmente si involucran la sincronización de datos.
• Consideraciones de Seguridad: Almacena de forma segura los datos sensibles en IndexedDB y protégete contra las vulnerabilidades de cross-site scripting (XSS).
• Pruebas: Prueba a fondo tu implementación de programación de tareas en segundo plano en diversas condiciones de red y entornos de navegador.

Consideraciones sobre Internacionalización y Localización

Al desarrollar PWA para una audiencia global, es esencial considerar la internacionalización (i18n) y la localización (l10n):

• Soporte de Idiomas: Admite múltiples idiomas y permite a los usuarios elegir su idioma preferido.
• Formato de Fecha y Hora: Usa formatos de fecha y hora apropiados para diferentes regiones.
• Formato de Números: Usa formatos de números apropiados para diferentes regiones, incluidos los separadores decimales y de miles.
• Formato de Moneda: Muestra los valores de moneda con los símbolos y formatos correctos para diferentes regiones.
• Traducción: Traduce todo el texto orientado al usuario a los idiomas admitidos.
• Soporte de Derecha a Izquierda (RTL): Admite idiomas RTL como el árabe y el hebreo.

Librerías como i18next y Moment.js pueden ayudar a simplificar la i18n y l10n en tu PWA.

Ejemplos de PWA del Mundo Real que Utilizan la Programación de Tareas en Segundo Plano

Varias PWA del mundo real aprovechan la programación de tareas en segundo plano para proporcionar experiencias sin conexión fluidas:

• Google Docs: Permite a los usuarios crear y editar documentos sin conexión, sincronizando los cambios cuando se restablece la conectividad.
• Twitter Lite: Permite a los usuarios redactar y enviar tuits sin conexión, subiéndolos cuando vuelven a estar en línea.
• Starbucks: Permite a los usuarios realizar pedidos sin conexión, que luego se envían cuando hay conectividad disponible.
• AliExpress: Permite navegar por productos y agregarlos al carrito sin conexión, con sincronización al reconectarse.

Conclusión

La programación de tareas en segundo plano es un componente crítico de las PWA modernas, que permite una gestión robusta del trabajo sin conexión y mejora la experiencia del usuario. Al aprovechar tecnologías como los Service Workers, IndexedDB y la API de Sincronización en Segundo Plano, los desarrolladores pueden crear PWA que proporcionan una funcionalidad fluida y fiable, incluso en ausencia de conectividad de red. A medida que las PWA continúan evolucionando, dominar la programación de tareas en segundo plano será esencial para construir aplicaciones web verdaderamente atractivas y accesibles a nivel mundial. Recuerda priorizar el manejo de errores, la optimización de la batería y la retroalimentación del usuario para crear una experiencia pulida y amigable para una audiencia global diversa.